<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    /**
     * 绘制圆弧的方法有
     *
     *CanvasRenderingContext2D.arc()
     *CanvasRenderingContext2D.arcTo()
     *2.1.2.1. 绘制圆弧
     *语法: CanvasRenderingContext2D.arc( x, y, radius. startAngle. endAngle, anticlockwise )
     *
     *描述:
     *
     *该方法用于绘制一段弧, 配合开始点的位置 与 stroke 方法或 fill 方法可以绘制扇形.
     *方法中的前两个参数 x, y 表示绘制圆弧的圆心坐标.
     *参数 radius 表示圆弧半径, 单位为弧度.
     *参数 startAngle 与 endAngle 表示开始到结束的角度. 角度以水平向右为 0 弧度, 顺时针为正方向.
     *参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选.
     */

    // 在 200, 200 的地方绘制一段半径为 100 的圆弧, 圆心角为 - PI / 2 到 PI / 4
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";

    ctx.arc(200 , 200 , 100 , -Math.PI/2 , Math.PI/4);
    ctx.stroke();

    //为了方便看清楚结构，绘制坐标轴
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo(50,200);
    ctx.lineTo(350,200);

    ctx.moveTo(200 , 0);
    ctx.lineTo(200,350);

    ctx.moveTo( 200, 200 );
    ctx.lineTo( 300, 300 );

    ctx.stroke();

</script>
</body>
</html>



